<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }
        html , body , .layout {
            height: 100%;
        }
        .layout {
            background-color: #ccc;
            /* height: 2000px; */
        }
    </style>
</head>
<body>

    <div class="layout"></div>

    <script>

        // 获取layout标签
        var layout = document.querySelector(".layout")
        // 事件绑定
        // layout.onclick = function(evt) {
            // 1.在函数作用域中,window下的事件对象
            // console.log(window.event);

            // 2.函数作用域形参
            // console.log(event);
            // console.log(e);
            // console.log(evt);

            // 3.找出事件对象
            // console.log(arguments[0]);
        // }

        // 获取关于当前事件的信息(事件源,鼠标的位置,事件类型,按键状态,方法..)
        // 事件对象
        layout.onclick = function(evt) {
            // console.log(evt);
            // 获取事件源
            // console.log(evt.target);//  <div class="layout"></div>
            // 获取鼠标在页面的位置
            console.log("页面:",evt.pageX);
            console.log("页面:",evt.pageY);
            // 获取鼠标在可视区可视区的位置
            console.log("可视区:",evt.clientX);
            console.log("可视区:",evt.clientY);
            // 获取事件类型
            console.log(evt.type);// click
            // 组合按键状态
            console.log(evt.altKey); // 默认false , 按下当前按键触发点击,返回结果为true
            console.log(evt.ctrlKey); // 默认false , 按下当前按键触发点击,返回结果为true
            console.log(evt.shiftKey); // 默认false , 按下当前按键触发点击,返回结果为true
        }
        // 解绑点击事件
        layout.onclick = null;

        // 键值码 keyCode 
        document.onkeydown = function(evt){
            // console.log(evt);
            // 键值码是与按键一一对应的数值(这些数值不需要去记忆的)
            // 40  向下
            // 38  向上
            // 39  向右
            // 37  向左
            console.log(evt.keyCode);
        }
    </script>
</body>
</html>